<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入favicon图标 -->
    <link rel="stylesheet" href="css/base.css">

    <link rel="stylesheet" href="css/sign.css">


</head>

<body>
    <!-- logo start -->
    <div class="header w">
        <div class="logo_box">
            <a href="#"><img src="images/logo.png" alt=""></a>
        </div>
    </div>
    <!-- logo end -->
    <!-- banner start -->
    <div class="banner_box">
        <div class="sign w">
            <div class="sign_in">
                <div class="td clearfix">
                    <span >扫描登录</span>
                    <span class="red">账户登录</span>
                </div>
                <div class="tab_con">
                    <div class="item ewm clearfix">
                    <li class="zhuce clearfix"><a href="#">立即注册</a></li>
                    </div>
                    <ul class="item" style="display: block;">
                        <li class="tishi">公共场所不建议自动登录，以免账号丢失</li>
                        <li class="zhanghao"><input type="text"></li>
                        <li class="mima"><input type="password" id="pwd"> <label for="" class="imgs"></label></li>
                        <li class="zidong"><input type="checkbox" id="zi"><label for="zi">自动登录</label> <a
                                href="#">忘记密码?</a></li>
                        <li class="denglu"><input type="submit" value="登 录"></li>
                        <li class="zhuce clearfix"><a href="#">立即注册</a></li>

                    </ul>
                    
                </div>
                <script>
                    var tabspan = document.querySelector('.td')
                    var spans = tabspan.querySelectorAll('span')
                    var items =document.querySelectorAll('.item')
                    for (let i = 0; i < spans.length; i++) {
                        // 设置索引号
                        spans[i].setAttribute('data-index',i);
                         spans[i].onclick = function() {
                             for (let i = 0; i < spans.length; i++) {
                                 spans[i].className = '';
                             }
                             this.className = 'red'

                            //  显示内容模块
                            var index = this.getAttribute('data-index')
                            console.log(index);
                            for (let i = 0; i < items.length; i++) {
                               items[i].style.display = 'none'
                                
                            }
                            items[index].style.display = 'block'

                         }
                        
                    }
                </script>
                <script>
                    var inp = document.querySelector('#pwd');
                    var lab = document.querySelector('label')
                    var flag = 0;
                    lab.onclick = function () {
                        if (flag == 0) {
                            lab.className = 'img'
                            inp.type = 'text'
                            flag = 1; //点完变成 1

                        } else {
                            inp.type = 'password'
                            lab.className = 'imgs'
                            flag = 0;   //点完变成 0 
                        }

                    }

                </script>

            </div>
        </div>
    </div>
    <!-- benner end -->
    <!-- fooder start -->
    <div class="fooder_3">
        <div class="dibu_1">
            <a href="#">关于我们</a> | <a href="#"> 联系我们</a> | <a href="#"> 联系客服</a> | <a href="">商家入驻</a> | <a
                href="#">营销中心</a> | 手机品优购 | 友情链接 |
            销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U

        </div>
        <div class="dibu_2">
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
            京ICP备08001421号京公网安备110108007702
        </div>

    </div>
    </div>

    </div>

    <!-- fooder end -->
</body>

</html>